<template>
    <div class="login">
        <div class="nav-logo">
            <img @click="home" src="../../assets/img/login-logo.png" height="74" width="302"/>
        </div>
        <div class="login-content">
            <div class="left">
                <img src="../Login/img/login-icon.png" height="640" width="536"/>
                <div class="word">
                    <Checkbox v-model="singleone">我已阅读并接受《用户协议》</Checkbox>
                </div>
            </div>
            <div class="right">
                <Tabs>
                    <TabPane label="手机快捷登录">
                        <div class="shortcut">
                        <div class="mobile">
                            <input type="text"  ref="mobile" placeholder="手机号" style="width: 350px" />
                        </div>

                        <div class="code">
                            <input search enter-button="获取验证码" placeholder="验证码"  ref="captcha" />
                            <button>获取验证码</button>
                        </div>
                         <div class="btn">
                            <button @click="phoneLogin">登录</button>
                         </div>
                            <p class="hint">未注册过的手机号将自动创建为红粉宝宝账号</p>
                            <Divider>第三方登录</Divider>
                            <ul class="login-ico">
                                <li> <a href="javascript:;"><img src="../Login/img/QQ.png"></a></li>
                                <li> <a href="javascript:;"><img src="../Login/img/weixin.png"></a></li>
                                <li> <a href="javascript:;"><img src="../Login/img/weibo.png"></a></li>
                            </ul>
                        </div>
                        <div class="end"><a @click="phone">立即注册红粉宝宝网</a></div>
                    </TabPane>
                    <TabPane label="账号密码登录" >
                        <div class="shortcut">
                            <div class="mobile">
                                <input type="text" ref="account"  placeholder="手机号/邮箱" style="width: 350px" />
                            </div>

                            <div class="code">
                                <input  placeholder="密码" type="password" ref="password" />

                            </div>
                            <div class="btn">
                                <button @click="login">登录</button>
                            </div>
                            <p class="hint"> <Checkbox v-model="single">记住我</Checkbox>
                                <a href="javascript:;">忘记密码?</a> </p>
                            <Divider>第三方登录</Divider>
                            <ul class="login-ico">
                                <li> <a href="javascript:;"><img src="../Login/img/QQ.png"></a></li>
                                <li> <a href="javascript:;"><img src="../Login/img/weixin.png"></a></li>
                                <li> <a href="javascript:;"><img src="../Login/img/weibo.png"></a></li>
                            </ul>
                        </div>
                        <div class="end" style="margin-top: 51px"><a @click="email" >立即注册红粉宝宝网</a></div>
                    </TabPane>
                </Tabs>
            </div>
        </div>
        <div class="footer">
            <p>红粉宝宝为真想美容有限公司版权所有</p>
            <p>京 ICP 备  1305110号</p>
        </div>
    </div>
</template>

<script>


    export default {
        name: "index",
        components:{


        },
        computed:{

        },
        data () {
            return {
                singleone: true,
                single: true
            }
        },
        methods:{
            home(){
                this.$router.push({path: '/'})
            },
            phone(){
                this.$router.push({path: '/phoneregister'})
            },
            email(){
                this.$router.push({path: '/emailregister'})
            },

            login () {
                let that=this
                let account=this.$refs.account.value;
                let password=this.$refs.password.value
                if(account==''||password==''){
                    that.$Message.info('请输入完整信息');
                }else{
                this.$post('/api/user/login', {
                    account:account,
                    password:password,
                }, function (res){
                    console.log(res)
                    that.$Message.info(res.msg);
                    that.$router.push({path: '/'})
                }, function (errcode, errmsg) {
                    that.$Message.info(errmsg);

                })
            }
            },

            phoneLogin () {
                let that=this
                let mobile=this.$refs.mobile.value;
                let captcha=this.$refs.captcha.value;
                if(mobile==''||captcha==''){
                    that.$Message.info('请输入完整信息');
                }else{
                this.$post('/api/user/mobilelogin', {
                    mobile:mobile,
                    captcha:captcha,
                }, function (res) {
                    console.log(res)
                    localStorage.token=res.data.userinfo.token
                    localStorage.type=1;
                    console.log(localStorage.type)
                    that.$Message.info(res.msg);
                    that.$router.push({path: '/'})
                }, function (errcode, errmsg) {
                    that.$Message.info(errmsg);

                })
            }
            }

        }


    }
</script>

<style  lang="less">
.login{
    width: 1200px;
    margin: 0 auto;
   .nav-logo{
       margin:48px 0  64px 0;
       padding-left:86px;
   }
   .login-content{
       width: 1056px;
       height: 640px;
       background-color: #FFFFFF;
       margin: 0 auto;
       border-radius: 10px;
       box-shadow: 0px 0px 15px 0px #999999;
   }
    .left{
        position: relative;
        float: left;
    }
    .word{
        position: absolute;
        bottom:4%;
        left: 35%;
        font-size: 14px;
        color: #ffffff;
    }
    .right{
        float: right;
        width: 520px;
    }
    .ivu-tabs-nav .ivu-tabs-tab{
        padding: 15px 80px!important;
    }
    .ivu-tabs-ink-bar,.ivu-tabs-ink-bar-animated{
        visibility: visible;
        width: 96px!important;
        margin-left: 74px;
    }
    .ivu-tabs-bar{
        border-bottom: none!important;
    }
    .mobile input,.code input{
        border: none;
        outline:none !important;
        border-radius: 0!important;
    }

    .code,.mobile{
        width: 420px;
        margin-top: 30px;
        padding-bottom: 10px;
        border-bottom: 1px solid #dcdee2!important;
    }
    .code button{
        margin-left: 170px;
        padding: 10px 20px;
        background-color:#eeeeee;
        outline: none;
        border: none;
        color: #999;
        border-radius: 4px;

    }
    .btn button{
        width: 420px;
        height: 55px;
        background-color: #ff5371;
        border-radius: 4px;
        color: #fff;
        outline: none;
        border: none;
        margin-top: 33px;
        font-size: 18px;
        cursor: pointer;
    }
    .shortcut input::placeholder{
        font-size: 16px;
    }
    .shortcut{
        width: 420px;
        margin: 0 auto;
    }
    .shortcut .hint{
        margin-top: 19px;
        color: #999999;
    }
    .shortcut .hint a{
        margin-left: 302px;
        color: #FE5371;
    }
    .ivu-divider-horizontal.ivu-divider-with-text-center, .ivu-divider-horizontal.ivu-divider-with-text-left, .ivu-divider-horizontal.ivu-divider-with-text-right{
        margin: 56px 0;
        color: #666666;
    }
    .login-ico li{
        display: inline-block;
        margin: 0 40px;
    }
    .end{
        width: 100%;
        height: 80px;
        text-align: center;
        line-height: 80px;
        background-color: #ff5371;
        border-radius: 0px 0px 10px 0px;
        margin-top: 31px;
    }
    .end a{
        color: #fff;
        font-size: 18px;
        text-decoration:underline;

    }
    .footer{

        margin: 5% 0 0 39%;
        text-align: center;
    }
    .footer p{
        width: 300px;
        font-size: 14px;
        color: #666666;
    }
}
</style>